// 基础面积图组件
import BaseLineChartComponent from "./base-line-chart.js";

class BasicAreaChart extends BaseLineChartComponent {
    constructor() {
        super();
    }

    // 重写默认配置
    getDefaultConfig() {
        const config = super.getDefaultConfig();

        // 基础面积图特定配置
        config.titleAttrs = [
            ...config.titleAttrs,
            ['title-text_text', '基础面积图'],
            ['title-subtext_text', '基础面积填充展示']
        ];

        config.axisAttrs = [
            ['xAxis-type_select', 'category'],
            ['yAxis-type_select', 'value']
        ];

        config.seriesAttrs = [
            ...config.seriesAttrs,
            ['series-smooth_radio', false],
            ['series-areastyle-show_radio', true],
            ['series-areastyle-color-gradient-show_radio', false],
            ['series-areastyle-color_colorpicker', ''],
            ['series-areastyle-opacity_slider', 0.7]
        ];

        return config;
    }

    // 重写默认数据
    getDefaultData() {
        return [
            {
                "访问量": [
                    { "name": "Mon", "value": 150 },
                    { "name": "Tue", "value": 230 },
                    { "name": "Wed", "value": 224 },
                    { "name": "Thu", "value": 218 },
                    { "name": "Fri", "value": 135 },
                    { "name": "Sat", "value": 147 },
                    { "name": "Sun", "value": 260 }
                ]
            }
        ];
    }

    // 生成完整图表配置
    generateOption(dataDemo, config) {
        // 提取x轴数据（从第一个系列的name字段获取）
        const xAxisData = dataDemo.length > 0
            ? Object.values(dataDemo[0])[0].map(item => item.name)
            : [];

        // 生成系列配置
        const series = this.generateSeries(dataDemo, config.seriesAttrs);

        // 基础配置结构（与提供的option格式一致）
        return {
            xAxis: {
                type: config.axisAttrs['xAxis-type'] || 'category',
                data: xAxisData
            },
            yAxis: {
                type: config.axisAttrs['yAxis-type'] || 'value'
            },
            series: series
        };
    }

    // 生成系列配置
    generateSeries(dataDemo, seriesConfig) {
        const defaultGradients = super.getDefaultGradients();
        const seriesList = [];

        dataDemo.forEach((item, index) => {
            const seriesKey = Object.keys(item)[0];
            if (!seriesKey) return;

            const seriesData = item[seriesKey];
            if (!Array.isArray(seriesData)) return;

            // 提取value组成数组（与基础配置中的data格式一致）
            const processedData = seriesData.map(dataItem => dataItem.value ?? 0);

            const gradientIndex = index % defaultGradients.length;
            const defaultColor = defaultGradients[gradientIndex].start;

            seriesList.push({
                name: seriesKey,
                type: 'line',
                data: processedData,  // 纯数值数组，符合基础配置要求
                smooth: seriesConfig['series-smooth'] ?? false,
                symbol: 'circle',
                symbolSize: 6,
                lineStyle: {
                    width: 2,
                    color: seriesConfig['series-areastyle-color'] || defaultColor
                },
                areaStyle: {
                    color: seriesConfig['series-areastyle-color'] || defaultColor,
                    opacity: parseFloat(seriesConfig['series-areastyle-opacity']) || 0.7
                }
            });
        });

        return seriesList;
    }


}

// 定义自定义元素
customElements.define('basic-area-chart', BasicAreaChart);
